<template>
	<div class="hotzone-item">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<div class="map-content">
				<el-image :src="STATIC_URL + state.src" v-if="state.src != ''" />
				<div
					class="map-item"
					v-for="(item, index) in state.hotzones"
					:key="index"
					v-hotzone="item"
					:style="{
						top: item.top + 'px',
						left: item.left + 'px',
						width: item.width + 'px',
						height: item.height + 'px',
					}"
					@dblclick.stop="openContentDialog(item)"
				>
					<div>
						<span v-if="item.text != ''">
							{{ item.text }}
						</span>

						<span v-else>双击选择链接 </span>
						{{ index }}
					</div>
					<div class="map-item-delete cursor-pointer" @click.stop="deleteHotzone(index)">
						<SvgIcon name="ele-CloseBold"></SvgIcon>
					</div>
				</div>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addHotzone" size="default">添加热区</el-button>
					<el-button type="primary" @click="saveHotzone" size="default">保存</el-button>
				</span>
			</template>
		</el-dialog>

		<div>
			<el-dialog v-model="state.isOpenContentDialog" title="填写地址及显示内容" append-to-body width="400">
				<div>
					<el-form size="default" label-width="100px" class="table-form">
						<el-form-item label="连接地址">
							<el-input size="default" placeholder="请输入商品名称" clearable style="width: 100%" v-model="state.content.url">
								<template #append> <el-button @click="openChoiceData()">选择</el-button> </template>
							</el-input>
						</el-form-item>
						<el-form-item label="显示名称">
							<el-input size="default" placeholder="请输入商品名称" clearable style="width: 100%" v-model="state.content.text" />
						</el-form-item>
					</el-form>
				</div>
				<template #footer>
					<span class="dialog-footer">
						<el-button type="primary" @click="submitHotzoneContent" size="default">确认</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, defineAsyncComponent } from 'vue';
import { STATIC_URL } from '/@/utils/config';
import _ from 'lodash';
const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));

const PageDataRef = ref();
const state = reactive({
	dialog: {
		isShowDialog: false,
		title: '设置热区',
	},
	src: '',
	hotzones: [] as any,
	isOpenContentDialog: false,
	content: {
		text: '',
		url: '',
	},
	item: {} as any,
	mouseXStart: 0,
	mouseYStart: 0,
	enabbleMove: false,
});

const emits = defineEmits(['saveHotzone']);

function down(ev: any) {
	ev.currentTarget.style.cursor = `move`;
	state.mouseXStart = ev.clientX;
	state.mouseYStart = ev.clientY;
	console.log('mouseXStart: ', state.mouseXStart, ' , mouseYStart: ', state.mouseYStart);
	state.enabbleMove = true;
}

function move(ev: any, item: any) {
	console.log('state.enabbleMove: ', state.enabbleMove);
	// console.log('item: ', item);
	if (!state.enabbleMove) {
		return;
	}
	console.log('move ev: ', ev, ' ,item: ', item);
	const rectLeft = ev.currentTarget.offsetLeft;
	const rectTop = ev.currentTarget.offsetTop;

	console.log('rectLeft: ', rectLeft, ' , rectTop: ', rectTop);

	const parent = ev.currentTarget.parentElement;
	const parentWidth = parent.clientWidth;
	const parentHeight = parent.clientHeight;

	console.log('parentWidth: ', parentWidth, ' , parentHeight: ', parentHeight);
	const currentWidth = ev.currentTarget.clientWidth;
	const currentHeight = ev.currentTarget.clientHeight;
	console.log('currentWidth: ', currentWidth, ' , currentHeight: ', currentHeight);
	const mouseXEnd = ev.clientX;
	const mouseYEnd = ev.clientY;
	let moveX = mouseXEnd - state.mouseXStart + rectLeft;
	let moveY = mouseYEnd - state.mouseYStart + rectTop;
	console.log('移动位置: moveX: ', moveX, ' , moveY: ', moveY);

	moveX = moveX < 0 ? 0 : moveX;
	moveX = moveX + currentWidth > parentWidth ? parentWidth - currentWidth - 2 : moveX;

	moveY = moveY < 0 ? 0 : moveY;
	moveY = moveY + currentHeight > parentHeight ? parentHeight - currentHeight - 4 : moveY;

	console.log('矫正位置位置: moveX: ', moveX, ' , moveY: ', moveY);
	// ev.currentTarget.style['top'] = moveY + 'px';
	// ev.currentTarget.style['left'] = moveX + 'px';

	item.top = moveY;
	item.left = moveX;
	// item.width = currentWidth;
	// item.height = currentHeight;
}
function up(ev: any) {
	// state.mouseXStart = ev.clientX;
	// state.mouseYStart = ev.clientY;
	console.log(ev.currentTarget);
	console.log('鼠标抬起');
	state.enabbleMove = false;
}

function out(ev: any) {
	// state.mouseXStart = ev.clientX;
	// state.mouseYStart = ev.clientY;
	console.log('鼠标out');
	state.enabbleMove = false;
}

function leave(ev: any) {
	console.log('鼠标leave');
	state.enabbleMove = false;
}

const vHotzone = {
	unmounted: (el, binding) => {
		console.log('卸载....: ', binding.value);
		el.removeEventListener('mousedown', el.onmousedown);
	},
	updated: (el, binding) => {
		el.onmousedown = (ev) => {
			el.style.cursor = `move`;
			const mouseXStart = ev.clientX;
			const mouseYStart = ev.clientY;
			// console.log('按下开始', mouseXStart, mouseYStart);
			// 当前滑块位置， 这个对应位置坐标
			const rectLeft = el.offsetLeft;
			const rectTop = el.offsetTop;

			const parent = el.parentElement;
			const parentWidth = parent.clientWidth;
			const parentHeight = parent.clientHeight;

			const currentWidth = el.clientWidth;
			const currentHeight = el.clientHeight;

			document.onmousemove = (e) => {
				const mouseXEnd = e.clientX;
				const mouseYEnd = e.clientY;
				let moveX = mouseXEnd - mouseXStart + rectLeft;
				let moveY = mouseYEnd - mouseYStart + rectTop;
				// console.log('移动位置: moveX: ', moveX, ' , moveY: ', moveY);
				el.style['top'] = moveY + 'px';
				el.style['left'] = moveX + 'px';
				moveX = moveX < 0 ? 0 : moveX;
				moveX = moveX + currentWidth > parentWidth ? parentWidth - currentWidth - 2 : moveX;

				moveY = moveY < 0 ? 0 : moveY;
				moveY = moveY + currentHeight > parentHeight ? parentHeight - currentHeight - 4 : moveY;

				// console.log('矫正位置位置: moveX: ', moveX, ' , moveY: ', moveY);
				el.style['top'] = moveY + 'px';
				el.style['left'] = moveX + 'px';

				binding.value.top = moveY;
				binding.value.left = moveX;
				binding.value.width = currentWidth;
				binding.value.height = currentHeight;
			};

			document.onmouseup = () => {
				// 取消事件
				document.onmousemove = null;
				document.onmouseup = null;
				console.log('删除事件');
			};
		};
	},
	mounted: (el, binding) => {
		el.onmousedown = (ev) => {
			el.style.cursor = `move`;
			const mouseXStart = ev.clientX;
			const mouseYStart = ev.clientY;
			// console.log('按下开始', mouseXStart, mouseYStart);
			// 当前滑块位置， 这个对应位置坐标
			const rectLeft = el.offsetLeft;
			const rectTop = el.offsetTop;

			const parent = el.parentElement;
			const parentWidth = parent.clientWidth;
			const parentHeight = parent.clientHeight;

			const currentWidth = el.clientWidth;
			const currentHeight = el.clientHeight;

			document.onmousemove = (e) => {
				const mouseXEnd = e.clientX;
				const mouseYEnd = e.clientY;
				let moveX = mouseXEnd - mouseXStart + rectLeft;
				let moveY = mouseYEnd - mouseYStart + rectTop;
				// console.log('移动位置: moveX: ', moveX, ' , moveY: ', moveY);
				el.style['top'] = moveY + 'px';
				el.style['left'] = moveX + 'px';
				moveX = moveX < 0 ? 0 : moveX;
				moveX = moveX + currentWidth > parentWidth ? parentWidth - currentWidth - 2 : moveX;

				moveY = moveY < 0 ? 0 : moveY;
				moveY = moveY + currentHeight > parentHeight ? parentHeight - currentHeight - 4 : moveY;

				// console.log('矫正位置位置: moveX: ', moveX, ' , moveY: ', moveY);
				el.style['top'] = moveY + 'px';
				el.style['left'] = moveX + 'px';

				binding.value.top = moveY;
				binding.value.left = moveX;
				binding.value.width = currentWidth;
				binding.value.height = currentHeight;
			};

			document.onmouseup = () => {
				// 取消事件
				document.onmousemove = null;
				document.onmouseup = null;
				console.log('删除事件');
			};
		};
	},
};

const openDialog = (src: string, hotzones: any) => {
	console.log('src: ', src);
	state.dialog.isShowDialog = true;
	state.src = src;
	if (!_.isEmpty(hotzones)) {
		state.hotzones = hotzones;
	}
};

const addHotzone = () => {
	state.hotzones.push({
		key: Date.now(),
		top: 0,
		left: 0,
		width: 150,
		height: 50,
		url: '',
		text: '',
	});
};

const deleteHotzone = (index: number) => {
	console.log('index: ', index);
	// splice(index, 1)
	const result = state.hotzones.splice(index, 1);
	console.log('result: ', result);
};
const saveHotzone = () => {
	emits('saveHotzone', state.hotzones);
	state.dialog.isShowDialog = false;
};

const openContentDialog = (item: any) => {
	console.log('打开内容输入框.....');
	state.isOpenContentDialog = true;
	state.item = item;
	state.content.url = item.url;
	state.content.text = item.text;
};
const submitHotzoneContent = () => {
	state.item.url = state.content.url;
	state.item.text = state.content.text;
	state.isOpenContentDialog = false;
	console.log('state.item.text: ', state.item.text);
};

const openChoiceData = () => {
	PageDataRef.value.openDialog();
};

const choicePage = (res: ChoicePageData) => {
	console.log('choice page res: ', res);
	state.content.url = res.urlContent;
	state.content.text = res.urlName;
};

defineExpose({
	openDialog,
});
</script>

<style scoped>
.hotzone-item {
}

.map-content {
	position: relative;
}

.map-item {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 150px;
	background-color: rgba(155, 89, 182, 0.3);
	left: 0px;
	top: 0px;
	border: 1px solid rgba(142, 68, 173, 1);
}
.map-item:hover .map-item-delete {
	display: flex;
	justify-content: center;
	align-items: center;
}
.map-item-delete {
	top: 0px;
	right: 0px;
	position: absolute;
	width: 20px;
	height: 20px;
	border-bottom-left-radius: 50%;
	border-bottom: 1px solid #8e44ad;
	border-left: 1px solid #8e44ad;
	box-sizing: content-box;
	display: none;
	background-color: #9b59b6;
}
</style>
